<template>
    <el-container>
        <el-header>下单</el-header>
        <el-main>
            <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="110px" label-position="right">
                <el-row :gutter="1">
                    <el-col :span="8">
                        <el-form-item label="工厂货号" prop="factory_number">
                            <el-select v-model="form.factory_number"  filterable style="width: 100%" placeholder="请选择" @change="numChange" clearable>
                                <el-option v-for="item in goodsList" :key="item.id" :label="item.factory_number" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="批次号" prop="batch_number">
                            <el-input v-model="form.batch_number" placeholder="请输入批次号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="首单/加单" prop="type">
                            <el-select v-model="form.type" placeholder="请选择首单/加单" style="width:100%">
                                <el-option label="首单" :value="1"></el-option>
                                <el-option label="加单" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="1" >
                    <el-col :span="8">
                        <el-form-item label="客户" prop="client_id">
                            <el-select v-model="form.client_id"  filterable style="width: 100%" placeholder="请选择客户" clearable @change="clientChange">
                                <el-option v-for="item in customList" :key="item.custom_id" :label="item.apply_name" :value="item.custom_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="SKC" prop="skc">
                            <el-input v-model="form.skc" placeholder="请输入SKC" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="品牌" prop="brand_id">
                            <el-select v-model="form.brand_id"  filterable style="width: 100%" placeholder="请选择品牌" clearable>
                                <el-option v-for="item in PingList" :key="item.id" :label="item.brand_name" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="1" >
                    <el-col :span="8">
                        <el-form-item label="商品类别" prop="goods_cate">
                            <el-select v-model="form.goods_cate"  filterable style="width: 100%" placeholder="请选择商品类别" @change="typeChange" clearable>
                                <el-option v-for="item in typeList" :key="item.id" :label="item.title" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="成分" prop="component">
                            <el-input v-model="form.component" placeholder="请输入成分"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="1" >
                    <el-col :span="8">
                        <el-form-item label="订单号" prop="order_no">
                            <el-input v-model="form.order_no" placeholder="请输入订单号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单交期" prop="deliver_time">
                            <el-date-picker v-model="form.deliver_time" type="data" style="width:100%" placeholder="请选择订单交期" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="紧急" prop="order_label">
                            <el-switch v-model="form.order_label" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="1">
                    <el-col :span="8">
                        <el-form-item label="工厂" prop="supplier_id">
                            <el-select v-model="form.supplier_id"  filterable style="width: 100%" placeholder="请选择工厂" clearable>
                                <el-option v-for="item in applyList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                        <el-col :span="8">
                            <el-form-item label="工厂价格" prop="factory_money">
                                <el-input v-model="form.factory_money" placeholder="请输入工厂价格" clearable></el-input>
                            </el-form-item>
                        </el-col>
                </el-row>
                <el-row :gutter="1">
                    <el-col :span="8">
                        <sc-form-table ref="table" v-model="form.size_data" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd>
                            <el-table-column prop="size" label="尺码" width="180"></el-table-column>
                            <el-table-column prop="num" label="数量" min-width="180">
                                <template #default="scope">
                                    <el-input v-model="scope.row.num" placeholder="请输入下单数量"></el-input>
                                </template>
                            </el-table-column>
                        </sc-form-table>
                    </el-col>
                    <el-col :span="16">

                    </el-col>
                </el-row>
            </el-form>
        </el-main>
        <el-footer>
			<el-button type="primary" @click="submit()">确 定</el-button>
        </el-footer>
        <!-- <save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save> -->
    </el-container>
</template>

<script>
// import save from './save.vue'
	export default {
        // components: {
        //     save
        // },
        name:"create",
		data() {
			return {
                dialog: {
                    save: false,
                },
				//表单数据
				form: {
					supplier_id:"",
					factory_number:"",
                    batch_number:"",
					factory_money:"",
					type:"",
					skc:"",
					brand_id:"",
					goods_cate:"",
					component:"",
					deliver_time:"",
                    order_label:0,
                    size_data:[]
				},
                factory_number:"",
				//验证规则
				rules: {
					factory_number: [
						{required: true, message: '请选择'}
					],
					order_no: [
						{required: true, message: '请输入订单号'}
					],
                    supplier_id: [
						{required: true, message: '请选择工厂'}
					],
                    factory_money: [
						{required: true, message: '请输入工厂价格'}
					],
				},
                addTemplate:{
                    size:"",
                    num:""
                },
                PingList:[],
                customList:[],
                typeList:[],
                applyList: [],
                goodsList:[]
			}
		},
		mounted() {
            // this.getKeHu()
            this.getPing()
            this.getType()
            this.getApply()
            this.getGoodsNumList()
		},
		methods: {
			//表单提交方法
			async submit(){
                var res = [];
                this.form.factory_number = this.factory_number
				res = await this.$API.order.getOrder.add.post(this.form);
                if (res.code == 1) {
                    this.$message.success("添加成功")
                    this.$router.push('/order/JIT')
                } else {
                    this.$alert(res.message, "提示", { type: 'error' })
                }
			},
            // 所有客户
            async getKeHu(){
                var res = await this.$API.all.customer.get();
                this.customList = res.data;
            },
            // 所有品牌
            async getPing(){
                var res = await this.$API.all.brand.get();
                this.PingList = res.data;
            },
            // 所有类别
            async getType(){
                var res = await this.$API.all.type.get();
                this.typeList = res.data;
            },
            // 获取工厂
            async getApply(){
                var res = await this.$API.all.Apply.get({type:1});
                this.applyList = res.data;
            },
            // 获取工厂货号
            async getGoodsNumList(){
                var res = await this.$API.all.goodsNumber.get();
                this.goodsList = res.data;
            },
             async typeChange(e){
                var res = await this.$API.goods.getGoodsTypeLists.type.get({id:e});
                this.form.size_data = []
                res.data.sample_clothing_arr.map(item=>{
                    this.form.size_data.push({
                        size:item,
                        num:''
                    })
                })
            },
            async numChange(e){
                this.goodsList.map(x=>{
                    if(e==x.id){
                        this.factory_number = x.factory_number
                    }
                })
                var res = await this.$API.goods.getGoods.detail.get({id:e});
                this.form.batch_number = res.data.new_batch_number
                res.data.customList.map(item=>{
                    this.customList.push({
                        custom_id:item.custom_id,
                        apply_name:item.apply_name,
                        skc:item.skc
                    })
                })
            },
            clientChange(e){
                this.customList.map(item=>{
                    if(e==item.custom_id){
                        this.form.skc = item.skc
                    }
                })
            }
		}
	}
</script>

<style lang="scss">
.el-form-item--default{
    align-items: center;
}
</style>
